<template>
	<div style="height: 100%;" v-loading="loading">
		<el-form :inline="true" :model="search" class="demo-form-inline">
			<el-form-item label="用户名:">
				<el-input clearable v-model="search.display_id" />
			</el-form-item>
			<el-form-item label="区域:">
				<el-input clearable v-model="search.region" />
			</el-form-item>
			<el-form-item label="国家:">
				<el-input clearable v-model="search.country" />
			</el-form-item>
			<el-form-item label="来源:">
				<el-input clearable v-model="search.source" />
			</el-form-item>
			<el-form-item label="金币大于:">
				<el-input clearable v-model="search.coins" />
			</el-form-item>
			<el-form-item label="粉丝大于:">
				<el-input clearable v-model="search.followers" />
			</el-form-item>
			<el-form-item label="关注大于:">
				<el-input clearable v-model="search.following" />
			</el-form-item>
			<el-form-item label="观众大于:">
				<el-input clearable v-model="search.audience" />
			</el-form-item>
			<el-form-item label="标签:">
				<el-input clearable v-model="search.tags" />
			</el-form-item>
			<el-form-item label="查验结果:">
				<el-select v-model="search.verification_result" placeholder="请选择" style="width: 140px">
					<el-option label="普通" value="普通" />
					<el-option label="金票" value="金票" />
				</el-select>
			</el-form-item>
			<el-form-item label="建联:">
				<el-select v-model="search.is_connected" placeholder="请选择" style="width: 140px">
					<el-option label="是" value="true" />
					<el-option label="否" value="false" />
					<el-option label="全部" value="null" />
				</el-select>
			</el-form-item>
			<el-form-item label="加入公会:">
				<el-select v-model="search.is_joined" placeholder="请选择" style="width: 140px">
					<el-option label="是" value="true" />
					<el-option label="否" value="false" />
					<el-option label="全部" value="null" />
				</el-select>
			</el-form-item>
			<el-form-item label="经纪人:">
				<el-select v-model="search.agent" placeholder="请选择" style="width: 140px">
					<el-option label="已分配" value="true" />
					<el-option label="未分配" value="false" />
					<el-option label="全部" value="null" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="success" @click="getTable">查询</el-button>
				<el-button type="danger" @click="resetForm">重置</el-button>
			</el-form-item>
		</el-form>
		<div>
			<el-button type="danger" @click="del">删除勾选</el-button>
		</div>
		<el-table ref="tableRef" :data="tableData" :max-height="maxHeight" style="width: 100%"
			@selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" />
			<el-table-column type="index" width="55" />
			<el-table-column prop="display_id" label="用户名" />
			<el-table-column prop="region" label="区域" />
			<el-table-column prop="country" label="国家" />
			<el-table-column prop="source" label="来源" />
			<el-table-column prop="coins" label="金币" sortable />
			<el-table-column prop="followers" label="粉丝" sortable />
			<el-table-column prop="following" label="关注" sortable />
			<el-table-column prop="audience" label="观众" sortable />
			<el-table-column prop="tags" label="标签" />
			<el-table-column prop="verification_result" label="查验结果">
				<template #default="scope">
					<el-tag :type="scope.row.verification_result === '普通' ? 'primary' : 'warning'" disable-transitions>
						{{ scope.row.verification_result }}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="is_connected" label="建联">
				<template #default="scope">
					<el-tag :type="scope.row.is_connected ? 'success' : 'info'" disable-transitions>
						{{ scope.row.is_connected ? '是' : '否' }}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="is_joined" label="加入公会">
				<template #default="scope">
					<el-tag :type="scope.row.is_joined ? 'success' : 'info'" disable-transitions>
						{{ scope.row.is_joined ? '是' : '否' }}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="agent" label="经纪人">
				<template #default="scope">
					<el-tag :type="scope.row.agent ? 'success' : 'info'" disable-transitions>
						{{ scope.row.agent ? scope.row.agent.userName : '否' }}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="created_at" label="采集时间" sortable />
			<el-table-column prop="updated_at" label="更新时间" sortable />
			<el-table-column prop="verified_time" label="查验时间" sortable />
			<el-table-column prop="uploaded_at" label="上传时间" sortable />
			<el-table-column fixed="right" label="操作" width="240">
				<template #default="scope">
					<el-button type="primary" size="small" @click="fenPeiFunc(scope.row)" v-if="userStore.userInfo.userLevel == 1">分配</el-button>
					<el-button :type="scope.row.is_connected ? 'danger' : 'primary'" size="small" @click="jianLian(scope.row)" v-if="userStore.userInfo.userLevel != 0">{{ scope.row.is_connected ? '取消建联' : '设置建联' }}</el-button>
					<el-button :type="scope.row.is_joined ? 'danger' : 'primary'" size="small" @click="gongHui(scope.row)" v-if="userStore.userInfo.userLevel != 0">{{ scope.row.is_joined ? '取消公会' : '设置公会' }}</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination v-model:current-page="search.page" v-model:page-size="search.limit" v-model:total="total"
			:page-sizes="[50, 100, 500, 1000]" size="small" layout="sizes, prev, pager, next, total"
			@update:page-size="handleSizeChange" @update:current-page="handleCurrentChange"
			style="padding: 10px 0px;" />
	</div>
</template>

<script setup>
import { anchorDeleteApi, anchorPageListApi, anchorUpdateApi } from '@/api/anchor'
import { userGetChildrenUsersAPI } from '@/api/user'
import { useTableHeight } from '@/hooks/useTableHeight'
import { useUserStore } from '@/store/modules/user'
import { ElMessage, ElMessageBox, ElOption, ElSelect } from 'element-plus'
import { h, onMounted, reactive, ref } from 'vue'

const userStore = useUserStore()

const { tableRef, maxHeight } = useTableHeight()

let total = ref(0)
let loading = ref(false)

const search = reactive({
	page: 1,
	limit: 50,
	display_id: '',
	region: '',
	country: '',
	source: '',
	coins: '',
	followers: '',
	following: '',
	audience: '',
	tags: '',
	verification_result: '',
	agent: 'null',
	is_joined: 'null',
	is_connected: 'null'
})

const multipleSelection = ref([])
const tableData = reactive([])
const childrenUsers = reactive([])

const fenPeiFunc = (row) => {
	const selectedValue = ref('') // 定义下拉框的绑定值

	ElMessageBox({
		title: '请选择所分配经纪人',
		closeOnClickModal: false,
		message: () =>
			h(ElSelect, {
				modelValue: selectedValue.value,
				'onUpdate:modelValue': (val) => {
					selectedValue.value = val
				},
				placeholder: '请选择一个经纪人',
				style: 'width: 200px', // 设置宽度
			}, () =>
				// 动态生成 ElOption
				childrenUsers.map(option =>
					h(ElOption, { label: option.userName, value: option._id })
				)
			),
		showCancelButton: true,
		confirmButtonText: '确定',
		cancelButtonText: '取消',
	}).then(async () => {
		console.log('用户选择了:', selectedValue.value)
		const res = await anchorUpdateApi({ _id: row._id, agent: selectedValue.value })
		console.log(res)
		await getTable()
	})
}

const jianLian = (row)=>{
	ElMessageBox.confirm(row.is_connected ? `是否取消[${row.display_id}]建联？`:`是否和[${row.display_id}]建联？`, '提醒', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(async () => {
		const res = await anchorUpdateApi({ _id: row._id, is_connected: !row.is_connected })
		console.log(res)
		await getTable()
		if (res.code == 0) {
			ElMessage.success('设置成功!')
		} else {
			ElMessage.error('设置失败!')
		}
		await getTable()
	})
}

const gongHui = (row)=>{
	ElMessageBox.confirm(row.is_joined ? `是否取消[${row.display_id}]公会？`:`是否设置加入[${row.display_id}]公会？`, '提醒', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(async () => {
		const res = await anchorUpdateApi({ _id: row._id, is_joined: !row.is_joined })
		console.log(res)
		await getTable()
		if (res.code == 0) {
			ElMessage.success('设置成功!')
		} else {
			ElMessage.error('设置失败!')
		}
		await getTable()
	})
}

const resetForm = () => {
	search.display_id = ''
	search.region = ''
	search.country = ''
	search.source = ''
	search.coins = ''
	search.followers = ''
	search.following = ''
	search.audience = ''
	search.tags = ''
	search.verification_result = ''
	search.agent='null'
	search.is_joined='null'
	search.is_connected='null'
	getTable()
}

const getTable = async () => {
	loading.value = true
	const data = await anchorPageListApi(search)
	total.value = data.data.total
	tableData.length = 0
	tableData.push(...data.data.list)
	loading.value = false
}

const handleSizeChange = async (value) => {
	search.limit = value
	search.page = 1
	await getTable()
}

const del = async () => {
	ElMessageBox.confirm('确认删除勾选数据？', 'Warning', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(async () => {
		const ids = multipleSelection.value.map((item) => item._id)
		const result = await anchorDeleteApi({ ids })
		if (result) {
			ElMessage.success('删除成功!')
		} else {
			ElMessage.error('删除失败!')
		}
		await getTable()
	})
}

const handleSelectionChange = (val) => {
	multipleSelection.value = val
}

const handleCurrentChange = async (value) => {
	search.page = value
	await getTable()
}

onMounted(async () => {
	const res = await userGetChildrenUsersAPI()
	childrenUsers.push(...res.data)
	await getTable()
})

</script>

<style lang="scss" scoped></style>